<template>
  <div class="homeContent bg-gray relposition">
      <!-- v-for循环服务类别 -->
      <div class="bg-white row-start pd15" style="height:300px">
          <div class="row-spaceb pt5 wrap bg-gray color-text-blue left-container">
              <div v-for="(item,index) in serviceTypeData" :key="index" class="shopTypeCard showMouse">
                  <div @click="openNew(item)" :class="['row-start-col-center','pd5','color-text',item === selectedItem ? 'selected':'']">
                      <div class="icon">
                          <!-- <icon-font size="30" :color="item === selectedItem ? '#fff':'#436af7'" :class="[item.icon]" /> -->
                          <img :src="item.icon" alt="" style="width: 33px;height: 33px" />
                      </div>
                      <div class="ml10 fs16 showMouse">
                        <span>{{item.productTypeName}} </span>
                      </div>
                  </div>
              </div>
          </div>
          <div class="content-container">
            <!-- 左侧轮播图 -->
            <div class="carousel-section">
              <el-carousel height="260px">
                <el-carousel-item v-for="item in carouselItems" :key="item.noticeId">
                    <a :href="item.noticeTitle" target="_blank" v-if="item.noticeTitle.startsWith('http')">
                      <img :src="getImageUrl(item.noticeContent)" style="width:100%;height:100%;object-fit:cover" alt="">
                    </a>
                    <img v-else :src="getImageUrl(item.noticeContent)" style="width:100%;height:100%;object-fit:cover" alt="">
                </el-carousel-item>
              </el-carousel>
            </div>
            
            <!-- 右侧信息公告 -->
            <div class="notice-section">
              <div class="notice-header">
                <el-tabs v-model="activeNoticeTab">
                  <el-tab-pane label="通知公告" name="notice">
                    <div class="notice-list">
                      <div v-for="item in noticeItems.notice" :key="item.noticeId" class="notice-item">
                        <div class="notice-link" @click="showNoticeDetail(item)">
                          <span class="notice-title">{{ item.noticeTitle }}</span>
                          <span class="notice-date">{{ formatDate(item.startTime) }}</span>
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="政策文件" name="policy">
                    <div class="notice-list">
                      <div v-for="item in noticeItems.policy" :key="item.noticeId" class="notice-item">
                        <div class="notice-link" @click="showNoticeDetail(item)">
                          <span class="notice-title">{{ item.noticeTitle }}</span>
                          <span class="notice-date">{{ formatDate(item.startTime) }}</span>
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="操作指南" name="guide">
                    <div class="notice-list">
                      <div v-for="item in noticeItems.guide" :key="item.noticeId" class="notice-item">
                        <div class="notice-link" @click="showNoticeDetail(item)">
                          <span class="notice-title">{{ item.noticeTitle }}</span>
                          <span class="notice-date">{{ formatDate(item.startTime) }}</span>
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </div>

          <!-- 通知详情对话框 -->
          <el-dialog
            title="通知详情"
            :visible.sync="noticeDetailVisible"
            width="50%"
            :close-on-click-modal="false"
            custom-class="notice-dialog"
          >
            <h3>{{ currentNotice?.noticeTitle }}</h3>
            <div class="notice-content" v-html="currentNotice?.noticeContent"></div>
          </el-dialog>
      </div>
      <div class="row-start width-24 relposition">
          <div class="width-14">
            <notice-swiper></notice-swiper>
          </div>
          <div class="width-10 row-start-col-center mt10 fs12 tr">
               <div class="downloadCard ml20 row-start-col-center showMouse" @click="openNewPage">
                    <div class="width-18">
                      <div>服务券</div>
                      <div>管理办法</div>
                    </div>
                    <div class="width-6"><img src="~@/assets/image/icon1.png" alt="" style="height:20px"></div>
               </div>
               <div class="downloadCard ml10 row-start-col-center showMouse"  @click="togglePopup1">
                    <div class="width-18">企业操作指南</div>
                    <div class="width-6"><img src="~@/assets/image/icon2.png" alt="" style="height:20px"></div>
               </div>
               <div class="downloadCard ml10 row-start-col-center showMouse" @click="togglePopup2">
                    <div class="width-18">
                       <div>服务商进驻</div>
                       <div>操作指南</div>
                    </div>
                    <div class="width-6"><img src="~@/assets/image/icon3.png" alt="" style="height:20px"></div>
               </div>
               <div class="downloadCard ml20 row-start-col-center showMouse" @click="openNotice">
                  <div class="width-18">
                    <div>2024年</div>
                    <div>"揭榜"通知</div>
                  </div>
                  <div class="width-6"><img src="~@/assets/image/icon4.png" alt="" style="height:20px"></div>
              </div>
          </div>
          <div v-if="showPopup1" class="popup1" >
                <div class="popup-content col-start" @click="closePopup">
                  <a :href="`${publicFileUrl}/【企业】操作指引-广西制造业企业培优育强服务券管理平台.pdf`" target="_blank"><img src="~@/assets/image/downloadIcon2.png"/> 下载课件</a> <!-- 替换为实际的PPT文件路径 -->
                  <a :href="`${publicFileUrl}/【企业】操作指引-广西制造业企业培优育强服务券平台.mp4`" class="mt10" target="_blank"><img src="~@/assets/image/downloadIcon.png"/> 下载操作视频</a> <!-- 替换为实际的视频文件路径 -->
               </div>
           </div>
          <div v-if="showPopup2" class="popup2" >
            <div class="popup-content col-start" @click="closePopup">
                <a :href="`${publicFileUrl}/【服务商】操作指引-广西制造业企业培优育强服务券管理平台.pdf`" target="_blank"><img src="~@/assets/image/downloadIcon2.png"/> 下载课件</a> <!-- 替换为实际的PPT文件路径 -->
                <a :href="`${publicFileUrl}/【服务商】操作指引-广西制造企业培优育强服务券平台.mp4`" class="mt10" target="_blank"><img src="~@/assets/image/downloadIcon.png"/> 下载操作视频</a> <!-- 替换为实际的视频文件路径 -->
                <a :href="`${bankDetailUrl}`" class="mt10" target="_blank"><img src="~@/assets/image/downloadIcon3.png"/> 银联签约步骤</a>
            </div>
          </div>
      </div>
      <!-- 客服热线 -->
      <div class="wechatImg">
        <img src="~@/assets/image/wechat.jpg" style="width:200px;height:auto" alt="">
      </div>
      
    <!-- <div v-if="noticeList.length > 0" class="noticePanel">
      <div v-for="(item, index) in noticeList" :key="index" class="noticeItem">
        <div class="noticeHeader">平台服务商、企业</div>
        <div class="noticeContent">
          <div class="noticeTitle">{{ item.noticeTitle }}</div>
          <div class="divider"></div>
          <div class="noticeButton" @click="showDetail(item)">查看详情</div>
        </div>
      </div>
    </div> -->

    <!-- Modal Dialog -->
    <el-dialog title="通知详情" :visible.sync="noticeVisible" width="525px" custom-class="my-dialog">
      <h4>{{ selectedNotice?.noticeTitle }}</h4>
      <p class="notice-content" v-html="selectedNotice?.noticeContent"></p>
    </el-dialog>
      <!-- 排序条件和服务名称搜索 -->
      <div class="row-spaceb-col-center mt20">
          <!-- <el-radio-group v-model="selectedSortOption" size="small">
            <el-radio-button :label="1" class="sortOption" border @click.native="selectSortOption(1)">
              <span>销量<i class="el-icon-sort"></i></span>
            </el-radio-button>
            <el-radio-button :label="2" class="sortOption" border @click.native="selectSortOption(2)">
              <span>价格 <i class="el-icon-sort"></i></span>
            </el-radio-button>
            <el-radio-button :label="3" class="sortOption" border @click.native="selectSortOption(3)">
              <span>销售额 <i class="el-icon-sort"></i></span>
            </el-radio-button>
          </el-radio-group> -->
        <el-button-group>
              <el-button 
                :type="selectedSortOption === 1 ? 'primary' : ''"
                @click="selectSortOption(1)" 
                :icon="getIcon(1)"
              >
                销量
              </el-button>
              <el-button 
                :type="selectedSortOption === 2 ? 'primary' : ''"
                @click="selectSortOption(2)" 
                :icon="getIcon(2)"
              >
                价格
              </el-button>
              <el-button 
                :type="selectedSortOption === 3 ? 'primary' : ''"
                @click="selectSortOption(3)" 
                :icon="getIcon(3)"
              >
                销售额
              </el-button>
            </el-button-group>
          <div v-if="selectedItem?.productTypeId === '33ac82ab-3ab4-46ce-bfd7-105fc62c4eac'" 
               class="digital-filters row-start-col-center ml10">
            <el-select
              v-model="digitalSubtype"
              size="small"
              clearable
              placeholder="数字化产品类型"
              @change="searchKey"
              class="mr10"
            >
              <el-option
                v-for="item in digitalSubtypeOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              />
            </el-select>
            
            <el-select
              v-model="digitalIndustry"
              size="small"
              clearable
              placeholder="数字化行业"
              @change="searchKey"
              class="mr10"
            >
              <el-option
                v-for="item in digitalIndustryOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              />
            </el-select>
            
            <el-select
              v-model="digitalScenarios"
              size="small"
              clearable
              placeholder="数字化场景"
              @change="searchKey"
              class="mr10"
            >
              <el-option
                v-for="item in digitalScenariosOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              />
            </el-select>
          </div>
          <div class="row-start-col-center">
             <div class="price-range mr10">
                <el-input 
                  size="small" 
                  v-model="limitPrice" 
                  placeholder="最低价格(元)"
                  class="price-input"
                  clearable
                  @keyup.enter.native="searchKey"
                >
                </el-input>
                <span class="mx5">-</span>
                <el-input 
                  size="small" 
                  v-model="upperPrice" 
                  placeholder="最高价格(元)"
                  class="price-input"
                  clearable
                  @keyup.enter.native="searchKey"
                >
                </el-input>
              </div>
              <el-input size="small" clearable placeholder="请输入服务名或服务商关键字" v-model="searchKeyword" @keyup.enter.native="searchKey" class="input-with-select"></el-input>
              <el-button size="small" class="ml10" icon="el-icon-search" @click="searchKey"></el-button>
              <el-button size="small" plain class="ml10" @click="searchAll">全部</el-button>
          </div>
      </div>
      <!-- v-for循环生成卡片式服务列表 -->
      <el-empty v-if="cardList.length === 0" :image-size="200"></el-empty>
      <div v-else class="row-start wrap width-24">
           <div v-for="(item,index) in cardList" :key="index" class="mt10 shoppingCard" @click="gotoProductDetal(item)">
              <div class="bg-white showMouse card-shadow pl5 pr5 pt5 pb20 mb40 relposition">
                  <div class="absposition">
                        <img v-if="item.parentProductTypeId === '1'" src="~@/assets/image/badge.png" style="width:92px;height:28px" alt="">
                        <img v-if="item.parentProductTypeId === '2'" src="~@/assets/image/badge2.png" style="width:92px;height:28px" alt="">
                  </div>
                  <div class="productImage">
                      <img :src="`/api/public/file/v1/public/get/${item.productImg}`" class="comIntro" style="max-width:100%; max-height:100%; object-fit:contain;" alt="" @error="setDefaultImage">                  </div>
                  <!-- 单价 -->
                  <div class="mt20 ml10 fs18 color-red fwbold">
                    <span v-if="item.parentProductTypeId === '2'">面议</span>
                    <span v-else>{{$priceFormat(item.limitPrice, item.upperPrice)}} 元 </span>
                  </div>
                  <div v-if="item.parentProductTypeId === '1'"  class="mt5 ml10 color-grey fs12">
                    平台销售价:<span style="text-decoration: line-through">{{$priceFormat(item.limitOriginalPrice, item.upperOriginalPrice)}} 元 </span>
                  </div>
                  <!-- 服务名称 -->
                  <div class="mt10 ml10 fs15">
                    <span>{{item.productName}} </span>
                  </div>
                  <div class="row-spaceb mr10">
                      <!-- 评分 -->
                      <div class="mt10 ml10 fs12">
                        <span class="color-red">评分：{{item.score || 0}} </span>
                        <span class="color-grey ml30">交易次数：{{item.transNum || 0}} </span>
                      </div>
                      <!-- 交易次数 -->
                      <div class="ml10 fs12">
                        <el-button plain size="mini" style="color:blue" @click="gotoProductDetal(item)">详情</el-button>
                      </div>
                  </div>
              </div>
           </div>
      </div>
      <div class="row-end mt20 mb20">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[12, 20, 32, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
      </div>
        <!-- 需要认证提示 -->
      <el-dialog title="服务券配额申请" :visible.sync="tipVisible" width="525px" custom-class="my-dialog">
        <p style="margin-top: -10px;">需要完成<span
            style="color: #436AF7;">"企业信息认证"</span>才可进行"服务券配额申请"、"申请入驻"或"支付认证"的操作，请先完成认证。</p>
        <div style="text-align: right;margin-top: 40px;">
          <el-button type="info" size="medium" @click="tipVisible = false">暂不认证</el-button>
          <el-button type="primary" size="medium" class="blue-btn"
            @click="() => { tipVisible = false; goToAuth() }">前往认证</el-button>
        </div>
      </el-dialog>
      <!-- 需要认证提示 -->
      <el-dialog title="温馨提示" :visible.sync="loginTipVisible" width="525px" custom-class="my-dialog">
        <p style="margin-top: -10px;">
            <p>  关于2025年第一次资金兑付结算的预通知：</p>
            <p>  （一）自治区工信厅拟于2025年3月初开展第一次通用券资金结算工作。鉴于服务商申请兑付前必须完成执行合同并上传相关佐证材料（须在关键环节登录平台提交能够充分必要佐证合同执行真实情况的材料，包括但不限于图片、视频、第三方证明等资料），当前剩余的执行合同时间已十分有限。</p>
            <p>  （二）目前合同执行完成和申请资金兑付结算订单较少（理论可结算的通用券金额已达1700万元，而已完成订单的通用券金额仅为约100万元）。请服务商注意加快安排执行合同，自查、上传相关佐证材料，完成服务后应尽快提交资金兑付结算申请。</p>
            <p>  （三）因安排资金兑付结算须经多项程序审核，本次结算审核工作一旦开启，将暂不受理新的兑付申请。</p>
            <p>  （四）基于便利企业和服务商开展业务的原则，在提交佐证材料过程中碰到问题，请及时与我们联系反馈意见建议。</p>
        </p>
        <div style="text-align: center;margin-top: 40px;">
          <el-button type="primary" size="medium" class="blue-btn"
            @click="handleLoginTipClose(true)">我已知晓</el-button>
          <el-button type="primary" plain size="medium" class="blue-btn ml20"
            @click="loginTipVisible = false">稍后再看</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import { requirementPage,getProductList,getProductTypeList,priceRange,portalNotice} from '@/api/homeApi'
import { mapGetters} from 'vuex'
import alertSwiper from '@/components/alertSwiper'
import noticeSwiper from '@/components/noticeSwiper'
export default {
  name: 'productList',
  components: {
    alertSwiper,
    noticeSwiper
  },
  data () {
    return {
       searchKeyword: null,
       selectedItem: null,
       previousSelectedItem: null,
       activeCarouselIndex: 0,
       typeList:[
            {name:'企业诊断',icon:require('@/assets/image/type1.png'),type:1},
            {name:'数字化转型',icon:require('@/assets/image/type2.png'), type:2},
            {name:'技术创新',icon:require('@/assets/image/type3.png'),type:3},
            {name:'管理咨询',icon:require('@/assets/image/type4.png'),type:4},
            {name:'市场开拓',icon:require('@/assets/image/type5.png'),type:5},
            {name:'企业上市',icon:require('@/assets/image/type6.png'),type:6},
            {name:'融资服务',icon:require('@/assets/image/type7.png'),type:7},
            {name:'检测认证',icon:require('@/assets/image/type8.png'),type:8},
            {name:'法律服务',icon:require('@/assets/image/type9.png'),type:9},
            {name:'培训服务',icon:require('@/assets/image/type10.png'),type:10},
            {name:'人力资源',icon:require('@/assets/image/type11.png'),type:11},
            {name:'其他服务',icon:require('@/assets/image/type12.png'),type:12},
       ],
       // 生成一个卡片式数组，包含12个元素，包含服务价格/单位、服务名称、服务评分，交易次数、服务券类型，服务头图
        cardList:[
          // {price:Math.floor(Math.random()*100),name:'服务名称1',score:Math.floor(Math.random()*5),tradeNum:Math.floor(Math.random()*100),type:'通用券',img:'@/assets/image/service1.png'},
        ],
        currentPage: 1,
        pageSize: 12,
        total: 10,
        selectedSortOption:null,
        serviceTypeData:[],
        isAsc:true,
        previousSortOption: 1,
        tipVisible: false,
        requireList:[],
        showPopup1: false,
        showPopup2: false,
        publicFileUrl:process.env.VUE_APP_PUBLIC_FILE_URL,
        clickCount:1,
        bankDetailUrl:process.env.VUE_APP_PUBLIC_FILE_URL + '/bankDetail/index.html',
        limitPriceConst:0,
        upperPriceConst:0,
        limitPrice:null,
        upperPrice:null,
        loginTipVisible:false,
        localStorageKey: 'hasReaded', // Add this line
        noticeVisible: false,
        selectedNotice: null,
        noticeList:[
          // Add more notices as needed
        ],
        digitalSubtype: null,
        digitalIndustry: null, 
        digitalScenarios: null,
        digitalSubtypeOptions: [],
        digitalIndustryOptions: [],
        digitalScenariosOptions: [],
        activeNoticeTab: 'notice',
        noticeDetailVisible: false,
        currentNotice: null,
    }
  },
  created () {
      // 获取跳转到服务详情的缓存
    const savedState = sessionStorage.getItem('productListState');
    if (savedState) {
      const state = JSON.parse(savedState);
      this.currentPage = state.currentPage;
      this.pageSize = state.pageSize;
      this.selectedSortOption = state.selectedSortOption;
      this.searchKeyword = state.searchKeyword;
    }
    this.search();
    // 获取服务类型
    this.getProductType()
    this.getRequirementPage()
    this.getPriceRange()
    this.getNoticeList()
    this.initDigitalOptions()
    if(this.userInfo?.isCompanyService){
      const hasRead = localStorage.getItem(this.localStorageKey)
      if (!hasRead) {
        this.loginTipVisible = true
      }
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ]),
    noticeItems() {
      return {
        notice: this.noticeList?.filter(item => item.noticeType === '1') || [], // 通知公告
        guide: this.noticeList?.filter(item => item.noticeType === '3') || [], // 操作指南
        policy: this.noticeList?.filter(item => item.noticeType === '2') || [] // 政策文件
      }
    },
    carouselItems() {
      return this.noticeList?.filter(item => item.noticeType === '4')
        .sort((a, b) => b.noticeId - a.noticeId) || []
    }
  },
  methods: {
    goToAuth(){
      this.$router.push({ name: '个人中心' })
    },
    showDetail(notice) {
      this.selectedNotice = notice
      this.noticeVisible = true
    },
    handleLoginTipClose(isRead = true) {
      this.loginTipVisible = false
      if (isRead) {
        localStorage.setItem(this.localStorageKey, 'true')
      }
    },
    getNoticeList(){
      portalNotice({pageNo:1,pageNum:100}).then(res => {
          if(res.code === 200){
            this.noticeList = res.rows
          }
      })
    },
    openNotice(){
        this.$confirm('自治区工业和信息化厅关于组织开展2024年度中小企业"揭榜"工作的通知，请各企业知悉。', '提示', {
          confirmButtonText: '下载',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
              // Create a temporary link element to trigger the download
           window.open(`${this.publicFileUrl}/自治区工业和信息化厅关于组织开展2024年度中小企业"揭榜"工作的通知.pdf`, '_blank');
        }).catch(() => {});
    },
    openNewPage() {
      window.open('http://gxt.gxzf.gov.cn/xxgk/fgzc/gfxwj/t18996666.shtml', '_blank'); // 替换为实际的URL
    },
    togglePopup1() {
      this.showPopup1 = !this.showPopup1;
      this.showPopup2 = false; // 关闭另一个弹窗
    },
    togglePopup2() {
      this.showPopup2 = !this.showPopup2;
      this.showPopup1 = false; // 关闭另一个弹窗
    },
    closePopup() {
      this.showPopup1 = false;
      this.showPopup2 = false;
    },
     getRequirementPage(){
        requirementPage({pageNo:1,pageNum:100}).then(res=>{
          if(res.code === 200){
            this.requireList = res.rows
          }
        })
     },
     getPriceRange(){
      priceRange().then(res => {
         if(res.code == 200){
            this.limitPriceConst =  res.data.limitPrice / 100
            this.upperPriceConst =  res.data.upperPrice / 100
         }
      })
     },
      setDefaultImage(event) {
        event.target.src = require('@/assets/image/error.jpg');
      },
      setCurrentItem(index) {
        this.activeCarouselIndex = index;
      },
      searchKey(){
        this.currentPage = 1
         this.search()
      },
      searchAll(){
        this.currentPage = 1
        this.searchKeyword = '';
        this.search()
      },
      search() {
        const limitPrice = this.limitPrice > 0 ? this.limitPrice*100 : null
        const upperPrice = this.upperPrice > 0 ? this.upperPrice*100 : null
        
        // 构建查询参数
        const params = {
          q: this.searchKeyword,
          isAsc: this.isAsc,
          pageNo: this.currentPage,
          pageNum: this.pageSize,
          orderBy: this.selectedSortOption,
          productTypeId: this.selectedItem?.productTypeId,
          limitPrice: limitPrice,
          upperPrice: upperPrice
        }

        // 当选中数字化转型类别时，添加相关筛选条件
        if (this.selectedItem?.productTypeId === '33ac82ab-3ab4-46ce-bfd7-105fc62c4eac') {
          if (this.digitalSubtype) params.digitalSubtype = this.digitalSubtype
          if (this.digitalIndustry) params.digitalIndustry = this.digitalIndustry
          if (this.digitalScenarios) params.digitalScenarios = this.digitalScenarios
        }

        getProductList(params).then(res => {
          if (res.code === 200) {
            this.cardList = res.rows.map(item => {
              let productImg = item.productImg.includes('|') ? item.productImg.split('|')[0] : item.productImg;
              return {
                ...item,
                productImg: productImg
              }
            });
            this.total = res.total
          }
        })
      },
      getProductType() {
        getProductTypeList().then(res => {
          if (res.code === 200) {
            if(res.data && res.data.length > 0){
              this.serviceTypeData = res.data
                .filter(item => item.level === 2) // Filter out items with level === 1
                .map((item, index) => {
                  // 确保index不超过typeList的长度
                  const iconIndex = index % this.typeList.length;
                  return {
                    ...item,
                    icon: this.typeList[iconIndex].icon
                  }
                });
            }
          }
        })
      },
      gotoDetail(){
          if(this.userInfo?.isCompanyAuth){
            this.$router.push({ name: '服务券配额申请' })
          }else {
            this.tipVisible = true
          }
      },
      clearSearch() {
        this.searchKeyword = '';
        // 在这里添加你的搜索逻辑
      },
      selectSortOption(option) {
            this.selectedSortOption = option;
            if(this.previousSortOption!== this.selectedSortOption){
               this.clickCount = 0
            }
            this.clickCount++;
            if (this.selectedSortOption === option) {
              if (this.clickCount === 1) {
                // First click: descending order
                this.isAsc = false;
              } else if (this.clickCount === 2) {
                // Second click: ascending order
                this.isAsc = true;
              } else {
                // Third click: reset sorting
                this.selectedSortOption = null;
                this.isAsc = true;
                this.clickCount = 0;
                this.previousSortOption = null; // Reset previous option
              }
            }
            this.search();
            if (this.selectedSortOption !== null) {
              this.previousSortOption = option;
            }
      },
      getIcon(option) {
        if (this.selectedSortOption !== option) {
          return 'el-icon-sort';
        }
        return this.clickCount === 1 ? 'el-icon-sort-down' : 'el-icon-sort-up';
      },
      openNew(item) {
        if (this.previousSelectedItem === item) {
          // Step 3: If the current item is the same as the previous, deselect
          this.selectedItem = null;
          this.previousSelectedItem = null; // Clear the previous selection
        } else {
          // Step 4: If the current item is different, select it and update previousSelectedItem
          this.selectedItem = item;
          this.previousSelectedItem = item; // Update the previous selection
        }
          // Prepare query parameters
        this.currentPage = 1
        this.search()
        // let queryParams = {
        //   isAsc: this.isAsc,
        //   pageNo: this.currentPage,
        //   pageNum: this.pageSize,
        //   orderBy: this.selectedSortOption,
        // };
        // if (this.selectedItem) {
        //   queryParams.productTypeId = this.selectedItem.productTypeId;
        // }

        // getProductList(queryParams).then(res => {
        //   if (res.code === 200) {
        //     this.cardList = res.rows.map(item => {
        //       let productImg = item.productImg.includes('|') ? item.productImg.split('|')[0] : item.productImg;
        //       return {
        //         ...item,
        //         productImg: productImg
        //       }
        //     });
        //     this.total = res.total
        //   }
        // })
        // 其他的代码...
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.search()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
        this.search()
      },
      gotoProductDetal(item){
        window.scrollTo(0, 0);
        sessionStorage.setItem('productListState', JSON.stringify({
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          selectedSortOption: this.selectedSortOption,
          searchKeyword: this.searchKeyword
        }));
        this.$router.push({path:'/productDetail',query:{type:item.name,id:item.productId}})
      },
      async initDigitalOptions() {
        if (this.$store.getters.commonDict.length === 0) {
          await this.$store.dispatch("getCommonDict")
        }
        for (const item of Object.values(this.$store.getters.commonDict)) {
          if (item.dictType === 'sme_digital_subtype') {
            this.digitalSubtypeOptions = item.dictData;
          }
          if (item.dictType === 'sme_digital_industry') {
            this.digitalIndustryOptions = item.dictData;
          }
          if (item.dictType === 'sme_digital_scenarios') {
            this.digitalScenariosOptions = item.dictData;
          }
        }
      },
      getNoticeLink(content) {
        if (!content) return '#'
        const match = content.match(/href="([^"]*)"/)
        return match ? match[1] : '#'
      },
      getImageUrl(content) {
        if (!content) return ''
        const match = content.match(/src="([^"]*)"/)
        if (!match) return ''
        const url = match[1]
        // 如果是相对路径，添加 API 基础路径
        return url
      },
      showNoticeDetail(notice) {
        if (this.activeNoticeTab === 'guide' && notice.attach) {
          const fileUrl = `/api/public/file/v1/public/get/${notice.attach}`;
          window.open(fileUrl, '_blank');
        } else {
          this.currentNotice = {
            ...notice,
            noticeContent: this.addClickHintToLinks(notice.noticeContent)
          };
          this.noticeDetailVisible = true;
        }
      },
      addClickHintToLinks(htmlContent) {
        // 使用正则表达式查找 <a> 标签并在其后添加提示文本
        return htmlContent.replace(/(<a\b[^>]*>)(.*?)(<\/a>)/gi, '$1$2 (点击查看)$3');
      },
      formatDate(dateString) {
        const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
        return new Date(dateString).toLocaleDateString('zh-CN', options);
      }
  }

}
</script>

<style lang="scss" scoped>
.wechatImg{
  position: absolute;
  left: 30px;
  top: 20px;
  z-index: 999;
}
.sortOption {
  cursor: pointer;
  color: #999;
}
.left-container{
  width: 400px;
}
.right-container{
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.sortOption .selected {
  color: #333;
}
.homeContent{
    width: 100%;
    min-width: 1750px;
    min-height:80vh;
    height: 100%;
    padding: 15px 15%;
    margin: 0 auto;
}
.border{
    border: 1px solid #ccc;
}
.comIntro{
  width: 100%;
}
.shopTypeCard{
  flex: 0 0 calc((100% / 2));
  box-sizing: border-box;
  padding-left: 15px;
}
  :deep(.el-carousel__container){
    height:260px
  }

/* .shopTypeCard:nth-child(2n) {
  padding-right: 0;
} */
/* :hover {
  transform: scale(1.1);
  transition: transform 0.3s;
} */
.shoppingCard{
  flex: 0 0 calc((100% - 150px) / 4);
  aspect-ratio: 0.93 / 1; /* 宽高比为3:1 */
  margin-left: 25px;
  margin-right: 25px;
  box-sizing: border-box;
}
.shoppingCard:nth-child(4n + 1) {
  margin-left: 0px;
}
.shoppingCard:nth-child(4n) {
  margin-right: 0px;
}
.selected {
  background-color: rgba(67, 106, 247, 1);
  color: #fff;
}
.selectedText {
  color: #333;
}
.carouselTitle{
  position: absolute; /* or 'fixed' depending on your needs */
  top: 50%;
  left: 15%;
  right: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;
  transform: translateY(-50%);
  padding: 10px; /* 根据需要添加内边距 */
}
.button1{
  width: 135px;
  height: 40px;
  background: #FFFFFF;
  border-radius: 5px 5px 5px 5px;
  border: 1px solid #436AF7;
  color: #436AF7;
  font-size: 16px;
  padding: 10px;
  position: absolute;
  bottom: 10px;
  right: 40%;
}
.button2{
  width: 262px;
  height: 50px;
  background: #436AF7;
  border-radius: 5px 5px 5px 5px;
  font-size: 18px;
  border: 1px solid #436AF7;
  }
  .productImage{
    width:100%; 
    aspect-ratio: 1.5 / 1;
    display:flex; 
    justify-content:center; 
    align-items:center;
    background-image: url('~@/assets/image/productBg.png');
    background-size: 100% 100%;
  }
   /**/
 .notice{
    width: 1200px;
    height: 50px;
    left: 50%;
    transform: translate(-50%);
    position: absolute;
    z-index: 2;
    padding: 0;
  }
  .notice ::v-deep .el-card__body{
    padding: 0;
  }
 /*使文字和公告图片在一行*/
  .notice_item{
    height: 50px;
    line-height: 50px;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .notice_item img{
    width: 40px;
    /*height: 16px;*/
    margin: 0 44px 0 32px;
  }
  .downloadCard{
    width:160px;
    height: 60px;
    padding: 6px;
    border: #436AF7 1px solid;
    border-radius: 2px;
  }
  .popup1 {
  position: absolute;
  top: 50px; /* 根据需要调整位置 */
  right: 140px; /* 根据需要调整位置 */
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}
  .popup2 {
  position: absolute;
  top: 50px; /* 根据需要调整位置 */
  right: 0px; /* 根据需要调整位置 */
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.popup-content {
  padding: 10px;
}

.popup-content a {
  margin: 0;
  padding: 10px;
  cursor: pointer;
}
.popup-content a:hover {
  background-color: #f0f0f0;
}
.price-range {
  display: flex;
  align-items: center;
}
.price-input {
  width: 120px;
}
.mx5 {
  margin: 0 5px;
}
.noticePanel {
  position: absolute;
  right: 30px;
  top: 20px;
  z-index: 999;
  width: 215px;
  min-height: 350px;

  background-image: url('~@/assets/image/noticebg.png');
  background-size: 100% 100%;
  padding: 60px 10px 10px;
  color: #333;
}
.noticeItem {
  background: white;
  border-radius: 8px;
  margin-bottom: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.noticeHeader {
  background-color: #E6E6FA;
  color: #666;
  padding: 8px;
  font-size: 14px;
  font-weight: 500;
}

.noticeContent {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.noticeTitle {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.divider {
  height: 1px;
  background-color: #eee;
  margin: 0;
}

.noticeButton {
  color: #436AF7;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  padding: 5px 0;
  transition: all 0.3s ease;
}

.noticeButton:hover {
  color: #2848c8;
  transform: scale(1.05);
}

.digital-filters {
  display: flex;
  align-items: center;
}
.digital-filters .el-select {
  width: 150px;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.carousel-container {
  flex: 1;
}

.notice-container {
  flex: 0 0 400px;
  margin-left: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.notice-header {
  padding: 0;
  background-color: #fff;
  border-radius: 4px 4px 0 0;
}

.notice-list {
  padding: 10px 20px;
  height: 220px;
  overflow-y: auto;
}

.notice-item {
  margin-bottom: 12px;
  padding-left: 12px;
  position: relative;
  
  &:before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 4px;
    height: 4px;
    background: #666;
    border-radius: 50%;
  }
}

.notice-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  line-height: 20px;
  
  &:hover {
    color: #409EFF;
    
    .notice-title {
      color: #409EFF;
    }
  }
}

.notice-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 10px;
}

.notice-date {
  flex: 0 0 auto;
  font-size: 12px;
  color: #999;
}

:deep(.el-tabs__header) {
  margin: 0;
  padding: 0 20px;
  background: #f5f7fa;
  border-radius: 4px 4px 0 0;
}

:deep(.el-tabs__nav-wrap::after) {
  display: none;
}

:deep(.el-tabs__item) {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #666;
  
  &.is-active {
    color: #409EFF;
  }
}

.content-container {
  display: flex;
  flex: 1;
  margin-left: 20px;
}

.carousel-section {
  flex: 1;
  margin-right: 20px;
  position: relative;
  background: url('~@/assets/image/homeBg2s.png') no-repeat center center;
  background-size: cover;
  border-radius: 4px;
  overflow: hidden;
  padding: 30px;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    z-index: 1;
  }
  
  :deep(.el-carousel__container) {
    height: 260px;
    position: relative;
    z-index: 2;
  }

  :deep(.el-carousel__item) {
    background: transparent;
  }
}

.carousel-section img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.notice-section {
  flex: 1;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.notice-list {
  padding: 10px 20px;
  height: 220px;
  overflow-y: auto;
}

.notice-item {
  margin-bottom: 12px;
  padding-left: 12px;
  position: relative;
  cursor: pointer;
  
  &:before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 4px;
    height: 4px;
    background: #666;
    border-radius: 50%;
  }

  &:hover .notice-title {
    color: #409EFF;
  }
}

.notice-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333;
  font-size: 14px;
  line-height: 20px;
}

.notice-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 10px;
  transition: color 0.3s;
}

.notice-date {
  flex: 0 0 auto;
  font-size: 12px;
  color: #999;
}

:deep(.notice-dialog) {
  .el-dialog__body {
    padding: 20px;
  }

  h3 {
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
    color: #333;
  }

  .notice-content {
    line-height: 1.6;
    color: #666;
  }
}

.notice-content {
  min-height: 300px;
  overflow-y: auto;
}
</style>
